<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>主页面</title>
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
  <meta http-equiv="description" content="this is my page" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="../script/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="../script/jquery.jqGrid.js" type="text/javascript"></script>
  <script src="../script/jquery.layout-latest.js" type="text/javascript"></script>
  <script src="../script/jquery-ui.js" type="text/javascript"></script>
  <script src="../script/jquery.treeview.js" type="text/javascript"></script>
  <script src="../script/demo.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../css/ui.jqgrid.css" type="text/css" />
  <link rel="stylesheet" href="../css/jquery-ui.css" type="text/css" />
  <link rel="stylesheet" href="../css/jquery.treeview.css" type="text/css" />
</head>

<body style="font-size:75%">
<!-- 生成对应的中间部分 注意这里样式是固定的 -->
  <div class="ui-layout-center">
    <div id="tabs"><!-- 在此生成对应的tabs -->
    
      <ul><!-- tabs的标题行 : 以后采用左侧树单击以后自动生成方式 生成 -->
      </ul>
      <div id="mPanel"><!-- 生成生成对应的tabs生成以后的显示页面 -->
		
	 </div>
	 
    </div>
  </div>


  <!-- 生成对应的上面的部分 样式固定 -->
  <div class="ui-layout-north">
    North
  </div>

  <!-- 生成对应的下面部分 样式固定  -->
  <div class="ui-layout-south">
    South
  </div>

  <!-- 生成左侧的树！样式固定 -->
  <div class="ui-layout-west">
	
	<!-- 这里有两个方式(treeview)(treeGrid)(自己采用jquery 编写一部分) -->    
   <ul id="browser" class="treeview-famfamfam">
		<li>Folder 1
			<ul>
				<li><a href="javascript:void(0);" oid="1" url="aa.html">Item 1.1</a></li>
				<li id="Tab-0"><a href='javascript:void(0);'>首页</a></li>
			</ul>
		</li>
		<li>Folder 2
			<ul>
				<li>Subfolder 2.1
					<ul id="folder21">
						<li><a href="javascript:void(0);" oid="2" url="../jqGridDemo/Dept.html">jqGridDemo</a></li>
						<li><a href="javascript:void(0);" oid="3" url="aa.html">File 2.1.2</a></li>
					</ul>
				</li>
				<li><a href="javascript:void(0);" oid="4" url="aa.html">File 2.2</a></li>
			</ul>
		</li>
		<li>Folder 3
			<ul>
				<li><a href="javascript:void(0);" oid="5" url="aa.html">File 3.1</a></li>
			</ul>
		</li>
		<li><a href="javascript:void(0);" oid="6" url="aa.html">File 4</a></li>
	</ul>

  </div>
  
  
  <script type="text/javascript">
       jQuery(document).ready(function () {
       
       //生成对应的父签页面
        var tabs = $("#tabs").tabs();
        
        //生成对应的显示li当中的标题模板,然后生成的时候采用正则替换 - :这里可以生成对应的关闭按钮
        var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
        

		//生成对应的布局页面
        $('body').layout({
        	applyDemoStyles : true
        });
        
        //左侧树形菜单 - 连接单点事件
        $("#browser li a").bind("click", function () {
        	
        	var id ="Tab-"+$(this).attr("oid");//针对已经添加过的标题这里不在重复添加而是采用选中方式操作
        	if($("#"+id).length != 0){
            	tabs.tabs( "option", "active", parseInt($(this).attr("oid"))); //完成把新添加的行选中操作
            }else{
	        	//采用新的api在Tabs标题行当中添加一个新的li li的名称采用对应数据库当中的菜单名称|地址采用对应的url
	        	 var li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, $(this).html() ) );
				 tabs.find( ".ui-tabs-nav" ).append( li );
				 $("#mPanel").append( "<iframe width='100%' id='" + id + "' src='"+$(this).attr("url")+"'></iframe>" );
				 tabs.tabs( "refresh" );	
				 tabs.tabs( "option", "active", parseInt($(this).attr("oid"))); //完成把新添加的行选中操作
            }
           
        });
    });
    

  </script>
</body>
</html>
